import React, { Component } from 'react'

import {
  Icon
} from 'antd'

import { formatDuring } from 'config/time'

import style from './index.less'

export default props => {
  const {
    label,
    value,

    mPreSelectEndDate,
    mHobSpecificTime,

    startDiffPreSelect,
    endDiffPreSelect,
    startDiffHobSpecific,
    endDiffHobSpecific,
  } = props

  if (label && value) {
    return (
      <div className = { style['banner'] }>
        <div className = { style['banner-countdown'] }>
          <div className = { style['banner-countdown-title'] }>
            <Icon type = 'clock-circle-o' />
            { label }
          </div>
          <div className = { style['banner-countdown-value'] }>
            { value }
          </div>
        </div>
      </div>
    )
  }

  let type = ''
  let count = ''

  if (startDiffPreSelect > -1) {
    type = '距备选开始'
    count = startDiffPreSelect
  } else if (endDiffPreSelect > -1 && !mPreSelectEndDate.isSame(mHobSpecificTime)) {
    type = '距备选结束'
    count = endDiffPreSelect
  } else if (startDiffHobSpecific > -1) {
    type = '距选房开始'
    count = startDiffHobSpecific
  } else if (endDiffHobSpecific > -1) {
    type = '距选房结束'
    count = endDiffHobSpecific
  }

  return (
    <div className = { style['banner'] }>
      {
        type ?
          <div className = { style['banner-countdown'] }>
            <div className = { style['banner-countdown-title'] }>
              <Icon type = 'clock-circle-o' />
              { type }
            </div>
            <div className = { style['banner-countdown-value'] }>
              { formatDuring(count) }
            </div>
          </div> :
          null
      }
    </div>
  )
}
